window.onload = function () {
    /*
    * 逻辑：
    * 1. 将图片的浮动布局改为定位布局
    *   1.1 获取所有的li元素
    *   1.2 获取所有li的位置，并存起来
    *   1.3 给每个li设置定位属性，并设置相应位置值
    * 2. 实现每个li都可以拖拽
    *   新的X位置值 = 原来的X位置值 + 坐标2X - 坐标1X
    *   新的Y位置值 = 原来的Y位置值 + 坐标2Y - 坐标1Y
    *   2.1 获取点击元素原来的位置
    *   2.2 获取点击时的位置1
    *   2.3 获取元素移动时鼠标的位置2，给被点击元素添加样式
    *   2.4 计算新位置
    *   2.5 给当前点击元素设置新位置
    * 3.碰撞检测
    *   3.0 坐标转换
    *   3.1 碰撞成功 碰撞逻辑（重要）
    *       鼠标当前位置为位置2
    *       位置2的X轴大于被碰撞元素的left，小于left+被碰撞元素的宽度
    *   3.2 改变被碰撞元素的样式，  变大，阴影
    * 4.鼠标抬起
    *   4.1 成功交换位置
    *   4.2 不成功回原位
    * */


    //1.将图片的浮动布局改为定位布局
    //1.1 获取所有的li元素
    var liList = document.getElementsByTagName('li');
    var photo =  document.getElementById('photo');
    var l = liList.length;
    var goalLi = ''; //存放目标元素
    var z = 1;
    //1.2 获取所有li的位置，并存起来
    var liOffsetArr = [];
    for (var i = 0; i < l; i++) {
        liOffsetArr.push(liList[i].offsetTop, liList[i].offsetLeft);
    }

    //1.3 给每个li设置定位属性，并设置相应位置值
    for (var j = 0; j < l; j++) {
        liList[j].style.position = 'absolute';
        liList[j].style.top = liOffsetArr[j][0] + 'px';  //Y轴位置
        liList[j].style.left = liOffsetArr[j][1] + 'px';  //X轴位置
        liList[j].style.margin = 0; //清除margin
    }

    //2.实现每个li都可以拖拽
    for (var k = 0; k < l; k++) {
        liList[k].onmousedown = function () {
            var self = this;  //当前点击的元素
            //2.1 获取点击元素原来的位置
            var selfL = self.offsetLeft; //X轴位置
            var selfT = self.offsetTop; //Y轴位置
            //2.2 获取点击时的位置1
            var ev = ev || window.event;  //获取window事件，保证兼容性
            var x0 = ev.clientX; //鼠标点击的X轴位置
            var y0 = ev.clientY; //鼠标点击的Y轴位置
            //2.3 获取元素移动时鼠标的位置2，给被点击元素添加样式
            document.onmousemove = function () {
                var ev = ev || window.event;
                var x1 = ev.clientX;
                var y1 = ev.clientY;

                //2.4 计算新位置，给元素设置新的X轴和Y轴的偏移量
                var xoffset = selfL+x1 - x0;
                var yoffset = selfT+y1 - y0;
                self.style.left = xoffset+'px';
                self.style.top = yoffset+'px';
                self.style.zIndex = z++;  //让被点击元素处于其他元素上面

                //3.0 坐标转换
                var xR = x1 - photo.offsetLeft;  //获取相对横坐标
                var yR = y1 - photo.offsetTop;
                //检测
                for(var n=0;n<l;n++){
                    //还原样式
                    liList[n].style.transform = '';
                    liList[n].style.boxShadow = '';
                    if(
                        xR > liList[n].offsetLeft &&
                        xR < liList[n].offsetLeft + 370 &&
                        yR > liList[n].offsetTop &&
                        yR < liList[n].offsetTop + 224 &&
                        liList[n] != self
                    ){
                        //3.2 改变样式
                        liList[n].style.transform = 'scale(1.05)';
                        liList[n].style.boxShadow = '0px 0px 5px #ff9900';
                        liList[n].style.transition = '0.3s';
                        //交换位置
                        goalLi = liList[n];
                        return;
                    }
                }
            };

            //4.鼠标抬起
            window.onmouseup = function(){
              if(goalLi){
                  //位置交换
                  self.style.left = goalLi.offsetLeft + 'px';
                  self.style.top = goalLi.offsetTop + 'px';
                  goalLi.style.left = selfL + 'px';
                  goalLi.style.top = selfT + 'px';
                  //还原目标元素的样式
                  goalLi.style.transform = '';
                  goalLi.style.boxShadow = '';

              }
              document.onmousemove = '';  //清除浏览器默认move事件


            };
            return false;
        }
    }


};
